<template>
  <div>
    <van-nav-bar title="美食" style="background-color: #FFD85F;" class="headera">
      <template #right>
        <van-icon name="chat-o" size="18" color="#f00" />
      </template>
    </van-nav-bar>

    <div style="background-color: #FFF7E1; min-height: 100vh; padding: 10px;">
      <!-- 个人信息卡片 -->
      <div class="user-card">
        <van-image class="user-avatar" width="60" height="60" :src="user.avatar" round />
        <div class="user-info">
          <div class="user-header">
            <h3>{{ user.username }}</h3>
            <van-button class="action-button" type="primary" @click="handleButtonClick(user.userId)">编辑</van-button>
          </div>
          <div class="user-details">
            <p><strong>年龄：</strong> {{ user.age }}</p>
            <p><strong>性别：</strong> {{ user.gender }}</p>
            <p><strong>邮箱：</strong> {{ user.email }}</p>
            <p><strong>健康状况：</strong> {{ user.healthStatus }}</p>

          </div>
        </div>
      </div>

      <!-- 我的服务卡片 -->
      <div class="service-card">
        <h3 class="service-title">我的服务</h3>
        <van-cell-group>
          <van-cell title="我的美食" is-link @click="release" class="custom-cell" />
          <div class="cell-gap"></div>

          <van-cell title="发布美食" is-link @click="add" class="custom-cell" />
          <div class="cell-gap"></div>

          <van-cell title="我的收藏" is-link @click="collect" class="custom-cell" />
          <div class="cell-gap"></div>

          <van-cell title="自动生成" is-link @click="langguage" class="custom-cell" />

        </van-cell-group>
      </div>

      <!-- 退出登录按钮 -->
      <div class="logout-button-wrapper">
        <van-button class="logout-button" type="danger" block @click="handleLogout">退出登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { Image, Button, Cell, CellGroup } from 'vant';


export default {
  components: {
    [Image.name]: Image,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  data() {
    return {
      user: []
    };
  },
  computed: {
    parsedPreferences() {
      const preferences = JSON.parse(this.user.preferences);
      let preferenceText = '';
      preferenceText += preferences.vegetarian ? '素食者, ' : '非素食者, ';
      preferenceText += preferences.gluten_free ? '无麸质, ' : '';
      preferenceText += '喜欢的菜系: ' + (preferences.favorite_cuisines || []).join(', ');
      return preferenceText;
    },
  },
  methods: {
    release() {
      this.$router.push({
        name: "release"
      })
    },
    handleButtonClick(id) {

      this.$router.push({
        name: "edit",
        params: {
          id
        }
      })
    },
    handleLogout() {
      localStorage.clear();
      this.$router.push({
        name: "login"
      })
    },
    collect() {
      this.$router.push({
        name: 'collect'
      })
    },
    langguage() {
      this.$router.push({
        name: 'language'
      })
    },
    add() {
      this.$router.push({
        name: 'addfood'
      })
    }
  },
  created() {
    axios({
      url: "http://localhost:8081/wx/admin/user?id=" + localStorage.getItem("userId")
    }).then(res => {

      this.user = res.data.data
    })
  }
};
</script>

<style scoped>
.custom-cell {
  border-radius: 10px;
  margin-bottom: 10px;

  box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Cell 间隔 */
.cell-gap {
  height: 12px;

}

/* 可选：点击时轻微缩小的动画效果 */
.custom-cell:active {
  transform: scale(0.98);
}

.user-card {
  display: flex;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(145deg, #ffdf91, #ffc857);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1), -2px -2px 8px rgba(255, 255, 255, 0.5);
  margin-top: 20px;
  align-items: center;
}

.user-avatar {
  margin-right: 12px;
  border: 2px solid #FFD85F;
}

.user-info {
  padding: 10px;
  border-radius: 8px;
  width: 100%;
}

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-header h3 {
  margin: 0;
  font-size: 1.1em;
  color: #333;
}

.user-details p {
  margin: 6px 0;
  font-size: 0.9em;
  color: #555;
}

.action-button {
  background-color: #FFD85F;
  color: #000;
  border-radius: 20px;
  font-weight: bold;
  padding: 4px 12px;
  font-size: 0.9em;
}

.service-card {
  background-color: #FFD85F;
  padding: 10px;
  border-radius: 10px;
  margin-top: 20px;
}

.service-title {
  margin: 0 0 10px;
  font-size: 1.2em;
  color: #333;
}

.cell-spacing {
  height: 5px;
  background-color: #FFF7E1;
}

.logout-button-wrapper {
  margin-top: 20px;
  padding: 0 10px;
}

.logout-button {
  background-color: #f44;
  color: #fff;
  border-radius: 20px;
  font-weight: bold;
}
</style>
